<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工业屏交易平台 - 供应分类</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2b6de5;
            --secondary-color: #3c8cff;
            --accent-color: #ff7d00;
            --success-color: #34c759;
            --light-bg: #f8f9fa;
            --border-color: #eaeaea;
            --text-primary: #333;
            --text-secondary: #666;
            --text-light: #999;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
            box-shadow: 0 0 15px rgba(0,0,0,0.05);
            position: relative;
            overflow-x: hidden;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px;
            position: relative;
            z-index: 10;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-weight: bold;
            font-size: 18px;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 8px;
            font-size: 20px;
        }
        
        .actions {
            display: flex;
            gap: 15px;
        }
        
        .actions i {
            font-size: 18px;
        }
        
        .search-box {
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        
        .search-box i {
            margin-right: 8px;
            color: rgba(255,255,255,0.8);
        }
        
        .search-box input {
            background: transparent;
            border: none;
            color: white;
            width: 100%;
            font-size: 14px;
        }
        
        .search-box input::placeholder {
            color: rgba(255,255,255,0.7);
        }
        
        /* 分类布局 - 饿了么风格 */
        .category-layout {
            display: flex;
            height: calc(100vh - 140px);
        }
        
        .category-sidebar {
            width: 100px;
            background: var(--light-bg);
            overflow-y: auto;
            border-right: 1px solid var(--border-color);
        }
        
        .category-item {
            padding: 15px 10px;
            text-align: center;
            font-size: 13px;
            color: var(--text-secondary);
            border-left: 3px solid transparent;
            transition: all 0.3s ease;
        }
        
        .category-item.active {
            background: white;
            color: var(--primary-color);
            font-weight: bold;
            border-left-color: var(--primary-color);
        }
        
        .category-content {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }
        
        .subcategory-section {
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: var(--text-primary);
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .subcategory-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        
        .subcategory-item {
            background: white;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .subcategory-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 12px rgba(0,0,0,0.1);
        }
        
        .subcategory-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            color: var(--primary-color);
        }
        
        .subcategory-name {
            font-size: 13px;
            color: var(--text-primary);
        }
        
        /* 产品列表 */
        .product-list {
            padding: 15px;
        }
        
        .product-item {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            display: flex;
            gap: 12px;
        }
        
        .product-image {
            width: 90px;
            height: 90px;
            border-radius: 8px;
            background: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
            flex-shrink: 0;
        }
        
        .product-info {
            flex: 1;
        }
        
        .product-title {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 15px;
        }
        
        .product-model {
            color: var(--text-secondary);
            font-size: 13px;
            margin-bottom: 8px;
        }
        
        .product-company {
            color: var(--text-light);
            font-size: 13px;
            margin-bottom: 8px;
        }
        
        .product-action {
            color: var(--primary-color);
            font-size: 13px;
            font-weight: 500;
        }
        
        /* 筛选栏 */
        .filter-bar {
            background: white;
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
        }
        
        .filter-item {
            display: flex;
            align-items: center;
            color: var(--text-secondary);
            font-size: 13px;
        }
        
        .filter-item i {
            margin-right: 5px;
        }
        
        /* 产品详情 */
        .product-detail {
            padding: 15px;
        }
        
        .detail-header {
            margin-bottom: 20px;
        }
        
        .detail-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--text-primary);
        }
        
        .detail-specs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .spec-item {
            display: flex;
            align-items: center;
        }
        
        .spec-item i {
            margin-right: 8px;
            color: var(--primary-color);
            width: 16px;
        }
        
        .spec-label {
            color: var(--text-light);
            margin-right: 5px;
        }
        
        .company-card {
            background: var(--light-bg);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .company-logo {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            background: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
        }
        
        .company-info {
            flex: 1;
        }
        
        .company-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .company-meta {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .product-description {
            margin-bottom: 20px;
        }
        
        .description-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--text-primary);
        }
        
        .description-content {
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        /* 询价表单 */
        .inquiry-form {
            padding: 15px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .form-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
        }
        
        .form-textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
            min-height: 100px;
            resize: vertical;
        }
        
        .char-count {
            text-align: right;
            color: var(--text-light);
            font-size: 12px;
            margin-top: 5px;
        }
        
        .info-tip {
            background: var(--light-bg);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .tip-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--text-primary);
        }
        
        .tip-content {
            color: var(--text-secondary);
            font-size: 13px;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            background: var(--primary-color);
            color: white;
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: bold;
            text-decoration: none;
            text-align: center;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        
        .btn:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
        }
        
        .btn-block {
            display: block;
            width: 100%;
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline:hover {
            background: rgba(43, 109, 229, 0.1);
        }
        
        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        /* 底部导航 */
        .tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            border-top: 1px solid var(--border-color);
            z-index: 100;
            max-width: 480px;
            margin: 0 auto;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 0;
            color: var(--text-light);
            font-size: 11px;
        }
        
        .tab-item.active {
            color: var(--primary-color);
        }
        
        .tab-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }
        
        /* 页面容器 */
        .page {
            display: none;
            padding-bottom: 60px;
        }
        
        .page.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 供应分类页面 -->
        <div class="page active" id="categoryPage">
            <!-- 头部区域 -->
            <div class="header">
                <div class="top-bar">
                    <div class="logo">
                        <i class="fas fa-industry"></i>
                        <span>供应分类</span>
                    </div>
                    <div class="actions">
                        <i class="fas fa-bell"></i>
                        <i class="fas fa-user"></i>
                    </div>
                </div>
                
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="请输入搜索关键词">
                </div>
            </div>
            
            <!-- 分类布局 -->
            <div class="category-layout">
                <!-- 左侧分类导航 -->
                <div class="category-sidebar">
                    <div class="category-item active">优质企业</div>
                    <div class="category-item">设备模具</div>
                    <div class="category-item">国际品牌</div>
                    <div class="category-item">配套服务</div>
                    <div class="category-item">能源动力</div>
                    <div class="category-item">医疗卫生</div>
                    <div class="category-item">手机辅料</div>
                    <div class="category-item">包装印刷</div>
                </div>
                
                <!-- 右侧内容区域 -->
                <div class="category-content">
                    <!-- 优质企业 -->
                    <div class="subcategory-section">
                        <div class="section-title">优质企业</div>
                        <div class="subcategory-grid">
                            <div class="subcategory-item">
                                <div class="subcategory-icon">
                                    <i class="fas fa-mobile-alt"></i>
                                </div>
                                <div class="subcategory-name">手机辅料</div>
                            </div>
                            <div class="subcategory-item">
                                <div class="subcategory-icon">
                                    <i class="fas fa-box"></i>
                                </div>
                                <div class="subcategory-name">包装印刷</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 横切加工 -->
                    <div class="subcategory-section">
                        <div class="section-title">横切加工</div>
                        <div class="subcategory-grid">
                            <div class="subcategory-item">
                                <div class="subcategory-icon">
                                    <i class="fas fa-bolt"></i>
                                </div>
                                <div class="subcategory-name">Z FRD飞荣达</div>
                            </div>
                            <div class="subcategory-item">
                                <div class="subcategory-icon">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <div class="subcategory-name">电磁屏蔽器件</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 国内材料 -->
                    <div class="subcategory-section">
                        <div class="section-title">国内材料</div>
                        <div class="subcategory-grid">
                            <div class="subcategory-item">
                                <div class="subcategory-icon">
                                    <i class="fas fa-layer-group"></i>
                                </div>
                                <div class="subcategory-name">导电布衬垫</div>
                            </div>
                            <div class="subcategory-item">
                                <div class="subcategory-icon">
                                    <i class="fas fa-fill-drip"></i>
                                </div>
                                <div class="subcategory-name">金属填充</div>
                            </div>
                            <div class="subcategory-item">
                                <div class="subcategory-icon">
                                    <i class="fas fa-square"></i>
                                </div>
                                <div class="subcategory-name">导电硅橡胶</div>
                            </div>
                            <div class="subcategory-item">
                                <div class="subcategory-icon">
                                    <i class="fas fa-paint-roller"></i>
                                </div>
                                <div class="subcategory-name">粉末涂料</div>
                            </div>
                            <div class="subcategory-item">
                                <div class="subcategory-icon">
                                    <i class="fas fa-spray-can"></i>
                                </div>
                                <div class="subcategory-name">喷漆片</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="tabbar">
                <div class="tab-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-search"></i>
                    <span>求购</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-plus-circle"></i>
                    <span>发布</span>
                </div>
                <div class="tab-item active">
                    <i class="fas fa-warehouse"></i>
                    <span>供应</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 二级分类页面 -->
        <div class="page" id="subcategoryPage">
            <!-- 头部区域 -->
            <div class="header">
                <div class="top-bar">
                    <a href="#" class="back-button" onclick="showPage('categoryPage')">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div class="logo">
                        <i class="fas fa-industry"></i>
                        <span>手机辅料</span>
                    </div>
                    <div class="actions">
                        <i class="fas fa-ellipsis-v"></i>
                    </div>
                </div>
                
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="请输入搜索关键词">
                </div>
            </div>
            
            <!-- 筛选栏 -->
            <div class="filter-bar">
                <div class="filter-item">
                    <i class="fas fa-sort"></i> 默认
                </div>
                <div class="filter-item">
                    <i class="fas fa-eye"></i> 浏览
                </div>
                <div class="filter-item">
                    <i class="fas fa-map-marker-alt"></i> 城市
                </div>
                <div class="filter-item">
                    <i class="fas fa-tag"></i> 手机辅料
                </div>
            </div>
            
            <!-- 产品列表 -->
            <div class="product-list">
                <div class="product-item" onclick="showPage('detailPage')">
                    <div class="product-image">ITW FORMEX GL10</div>
                    <div class="product-info">
                        <div class="product-title">ITW FORMEX GL10</div>
                        <div class="product-model">型号: 0.25 厚度 散料</div>
                        <div class="product-company">苏州吉鼎电子科技有限公司</div>
                        <div class="product-action">进店 ></div>
                    </div>
                </div>
                
                <div class="product-item" onclick="showPage('detailPage')">
                    <div class="product-image">德莎TESA6152</div>
                    <div class="product-info">
                        <div class="product-title">德莎TESA6152双面胶 两面不同胶系PET P胶带</div>
                        <div class="product-model">型号: 61520</div>
                        <div class="product-company">深圳市鑫楷鸿胶粘有限公司</div>
                        <div class="product-action">进店 ></div>
                    </div>
                </div>
                
                <div class="product-item" onclick="showPage('detailPage')">
                    <div class="product-image">TESA61529</div>
                    <div class="product-info">
                        <div class="product-title">TESA61529 德莎61529双面胶带 可分切模切</div>
                        <div class="product-model">型号: 61529</div>
                        <div class="product-company">深圳市鑫楷鸿胶粘有限公司</div>
                        <div class="product-action">进店 ></div>
                    </div>
                </div>
                
                <div class="product-item" onclick="showPage('detailPage')">
                    <div class="product-image">TESA61225</div>
                    <div class="product-info">
                        <div class="product-title">TESA61225 德莎61225双面胶 黑色0.25 mmPET胶带</div>
                        <div class="product-model">型号: 61225</div>
                        <div class="product-company">深圳市鑫楷鸿胶粘有限公司</div>
                        <div class="product-action">进店 ></div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="tabbar">
                <div class="tab-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-search"></i>
                    <span>求购</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-plus-circle"></i>
                    <span>发布</span>
                </div>
                <div class="tab-item active">
                    <i class="fas fa-warehouse"></i>
                    <span>供应</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 产品详情页 -->
        <div class="page" id="detailPage">
            <!-- 头部区域 -->
            <div class="header">
                <div class="top-bar">
                    <a href="#" class="back-button" onclick="showPage('subcategoryPage')">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div class="logo">
                        <i class="fas fa-industry"></i>
                        <span>产品详情</span>
                    </div>
                    <div class="actions">
                        <i class="fas fa-share-alt"></i>
                    </div>
                </div>
            </div>
            
            <!-- 产品详情 -->
            <div class="product-detail">
                <div class="detail-header">
                    <div class="detail-title">TESA61225 德莎61225双面胶 黑色0.25mmPET胶带</div>
                    
                    <div class="detail-specs">
                        <div class="spec-item">
                            <i class="fas fa-ruler"></i>
                            <span class="spec-label">规格:</span> 1240mm*100m
                        </div>
                        <div class="spec-item">
                            <i class="fas fa-barcode"></i>
                            <span class="spec-label">型号:</span> 61225
                        </div>
                        <div class="spec-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span class="spec-label">地区:</span> 广东省·深圳市
                        </div>
                    </div>
                </div>
                
                <!-- 公司信息 -->
                <div class="company-card">
                    <div class="company-logo">
                        <i class="fas fa-building"></i>
                    </div>
                    <div class="company-info">
                        <div class="company-name">深圳市鑫楷鸿胶粘有限公司</div>
                        <div class="company-meta">20-50人 · 无需融资 · 其它</div>
                    </div>
                </div>
                
                <!-- 产品描述 -->
                <div class="product-description">
                    <div class="description-title">产品描述：</div>
                    <div class="description-content">
                        品牌：德莎tesa，型号：61225<br>
                        颜色：黑色，厚度：0.25MM<br>
                        基材：PET<br>
                        规格：1240MM*100M<br><br>
                        tesa61225是一款双面自粘胶带，产品由黑色PET基材和两面不同的胶系组成，具有良好的粘接性能和耐候性，适用于电子产品的固定和屏蔽。
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="btn-group">
                    <button class="btn btn-outline" onclick="showPage('inquiryPage')">一键询价</button>
                    <button class="btn">在线沟通</button>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="tabbar">
                <div class="tab-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-search"></i>
                    <span>求购</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-plus-circle"></i>
                    <span>发布</span>
                </div>
                <div class="tab-item active">
                    <i class="fas fa-warehouse"></i>
                    <span>供应</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 询价沟通页 -->
        <div class="page" id="inquiryPage">
            <!-- 头部区域 -->
            <div class="header">
                <div class="top-bar">
                    <a href="#" class="back-button" onclick="showPage('detailPage')">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div class="logo">
                        <i class="fas fa-industry"></i>
                        <span>询价沟通</span>
                    </div>
                    <div class="actions">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
            </div>
            
            <!-- 询价表单 -->
            <div class="inquiry-form">
                <div class="detail-title">适配分切机的铝导辊，特殊涂层工艺，防粘防滑，适合各类材料分切</div>
                
                <div class="info-tip">
                    <div class="tip-title">请填写报价内容</div>
                    <div class="tip-content">
                        填写准确的询价信息有助于供应商提供更精准的报价
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">姓名职位</label>
                    <input type="text" class="form-input" value="徐先生·总经理">
                </div>
                
                <div class="form-group">
                    <label class="form-label">联系电话</label>
                    <input type="tel" class="form-input" value="13472718369">
                    <div class="char-count">修改</div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">公司名称</label>
                    <input type="text" class="form-input" value="上海颐福慧">
                </div>
                
                <div class="info-tip">
                    <div class="tip-title">咨询信息</div>
                    <div class="tip-content">
                        请详细描述您的需求，包括产品规格、数量、交付时间等要求
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">咨询内容</label>
                    <textarea class="form-textarea" placeholder="请填写咨询信息"></textarea>
                    <div class="char-count">0/200</div>
                </div>
                
                <div class="info-tip">
                    <div class="tip-content">
                        提交咨询信息后可查看供应商联系电话
                    </div>
                </div>
                
                <button class="btn btn-block">保存并提交</button>
            </div>
            
            <!-- 底部导航 -->
            <div class="tabbar">
                <div class="tab-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-search"></i>
                    <span>求购</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-plus-circle"></i>
                    <span>发布</span>
                </div>
                <div class="tab-item active">
                    <i class="fas fa-warehouse"></i>
                    <span>供应</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 页面切换功能
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(pageId).classList.add('active');
        }
        
        // 分类项点击事件
        document.querySelectorAll('.category-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.category-item').forEach(i => {
                    i.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
        
        // 字符计数
        const textarea = document.querySelector('.form-textarea');
        const charCount = document.querySelector('.char-count');
        
        if (textarea && charCount) {
            textarea.addEventListener('input', function() {
                const count = this.value.length;
                charCount.textContent = `${count}/200`;
            });
        }
    </script>
</body>
</html>